<template>
  <div
    class="index-frame"
    v-if="!(tail && low && type)"
    v-loading="!(tail && low && type)"
    style="height: 100vh"
  ></div>
  <div class="index containe" v-else>
    <!-- 顶部图片 -->
    <TopPicture class="m-bt-15" />
    <!-- 搜索导航列表 -->
    <GameTypeNavigation :data="tail" @navChange="navChange($event,gotoRouter)" class="m-bt-15" />
    <div class="main">
      <div class="main-left-m">
        <!-- 单机游戏推荐 -->
        <GameList
          :data="tail"
          @pageChange="pageChange"
          @typeChange="typeChange"
        />
      </div>

      <div class="main-right-m">
        <img
          class="right-image"
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          alt=""
        />
        <!-- 游戏排行 -->
        <div class="m-bt-15">
          <WebGameRank :data="tail" :gameType="type" />
        </div>
        <img
          class="right-image"
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          alt=""
        />
      </div>
    </div>

    <div class="m-bt-15">
      <FriendLink class="m-bt-15" :data="low" />
    </div>
  </div>
</template>

<script setup>
import WebGameRank from "@/components/WebGameRank.vue";
import GameTypeNavigation from "@/components/GameTypeNavigation.vue";
import TopPicture from "@/components/TopPicture.vue";
import SearchCardG from "@/components/SearchCardG.vue";
import GameCard from "@/components/GameCard.vue";
import BannerLeft from "@/components/BannerLeft.vue";
import NewstRecomGame from "@/components/NewstRecomGame.vue";
import RecommendedGame from "@/components/RecommendedGame.vue";
import RecomAloneGame from "@/components/RecomAloneGame.vue";
import AloneGameRank from "@/components/AloneGameRank.vue";
import RecomMobileGame from "@/components/RecomMobileGame.vue";
import GameList from "@/components/GameList.vue";
import FriendLink from "@/components/FriendLink.vue";
import { onBeforeMount, ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = ref(useRoute());
const params = ref(useRoute().params);
const paramsList = params.value.param.split("_");
const pageNumber = ref(paramsList[3]||1);
const crumbVo = ref((paramsList[2]||0));
const curType = ref(paramsList[4]||"pop");
import { gotoList } from "@/utils/action";
const type = ref(409);
const tail = ref(null);
const getDatas = (isBlank = true) => {
  const { href } = router.resolve({
    name: "game-alone-ist",
    params: {
      param: "389_" +paramsList[1] +"_" +crumbVo.value +"_" +pageNumber.value +"_" +curType.value
    },
  });
  window.open(href, isBlank?"_blank":'_self');
};
const pageChange = (val) => {
  pageNumber.value = val;
  getDatas(false);
};
const low = ref(null);
axios.get("/api/download/home/low").then((res) => {
  low.value = res.data.data;
});
const navChange = (val,gotoRouter) => {
  crumbVo.value = val;
  curType.value = 'pop';
  pageNumber.value = 1;
  getDatas(false);
};
const typeChange = (val) => {
  curType.value = val;
  pageNumber.value = 1;
  axios
    .get(
      "/api/download/game/page/389_" +
        type.value +
        "_" +
        crumbVo.value +
        "_" +
        pageNumber.value +
        "_" +
        curType.value +
        ".html"
    )
    .then((res) => {
      tail.value = res.data.data
    });
};
onBeforeMount(() => {
  axios
    .get(
      "/api/download/game/page/389_" +
        type.value +
        "_" +
        crumbVo.value +
        "_" +
        pageNumber.value +
        "_" +
        curType.value +
        ".html"
    )
    .then((res) => {
      tail.value = res.data.data
    });
});
</script>

<style lang="less" scoped>
.containe {
  width: 1200px;
}
.index {
  min-height: 500px;

  .index-content {
    background: #fff;
  }

  .right-image {
    width: 100%;
    height: 305px;
    border-radius: 8px;
  }

  .main {
    display: flex;
    justify-content: space-between;

    &-left {
      width: 25%;
    }

    &-left-m {
      width: 70.5%;
    }

    &-center {
      width: 49%;
    }

    &-center-m {
      width: 100%;
    }

    &-right {
      width: 25%;
    }

    &-right-m {
      width: 28%;
    }
  }
}
</style>
